const template = `<div>
    <ui-box-container>
        <ui-prop>
            <ui-label slot="label" value="psd路径"></ui-label>
            <ui-input slot="content" readonly id="psd">
                <ui-button slot="suffix" id="btnSelect">...</ui-button>
            </ui-input>
        </ui-prop>
        <ui-prop>
            <ui-label slot="label" value="界面名"></ui-label>
            <ui-input slot="content" id="view" value="" />
        </ui-prop>
    </ui-box-container>
    <hr />
    <ui-prop>
        <div style="text-align: center;">
            <ui-button class="right, green" id="btnConvert">转换</ui-button>
        </div>
    </ui-prop>
</div>`;
const ids: string[] = [];
template.replace(/id="(\w+)"/g, (m, id) => {
    ids.push(id);
    return m;
});
module.exports = Editor.Panel.define({
    style: `#host {
    color: rgb(219, 205, 182);
    margin: 5px;
}`,
    template,
    $: ids.reduce((memo, r) => {
        memo[r] = '#' + r;
        return memo;
    }, {} as { [key: string]: string }),
    ready() {
        this.$.btnConvert?.addEventListener('confirm', async () => {
            const psd = (this.$.psd as HTMLInputElement).value;
            if (!psd?.length)
                return Editor.Dialog.info('未选择psd文件');

            await Editor.Message.request('scene', 'execute-scene-script', {
                method: 'convert',
                name: 'psd2prefab',
                args: [
                    psd,
                    (this.$.view as HTMLInputElement).value,
                ],
            });
        });
        this.$.btnSelect?.addEventListener('confirm', async () => {
            const res = await Editor.Dialog.select({
                title: '选择psd文件',
                filters: [{
                    name: 'PSD Files',
                    extensions: ['psd']
                }]
            });
            (this.$.psd as HTMLInputElement).value = res.filePaths[0];
        });
    },
});;
